<template>
	<view 
		v-if="commonPayTypeList && commonPayTypeList.length"
		class="pay-type-packbox flex-justify-content-between flex-align-items-start flex-wrap" >
		<view class="popup-name-txt font-hanserif-bold"> 支付方式 </view>
		<radio-group class="pay-type-content flex" style="width: 100%;" @change="payTypeRadioChange">
			<!-- #ifdef MP-WEIXIN -->
			<label class="pay-type-items flex-align-items-center flex-full"
				v-for="(item, index) in commonPayTypeList" :key="item.value"
				v-if="item.value === 'lianlianpay' ? (fromSence === 'investMoney') : true"
			>
			<!-- #endif -->	
			<!-- #ifdef APP-PLUS -->
			<label class="pay-type-items flex-align-items-center flex-full"
				v-for="(item, index) in commonPayTypeList" :key="item.value"
				v-if="item.value === 'lianlianpay' ? (!['bagSence', 'newerSence'].includes(fromSence)) : true"
			>
			<!-- #endif -->
				<image 
					v-show="['wx', 'adapay_mini', 'wxpay', 'wxapp', 'yeepay_wx', 'mbpay_wxmini', 'mbpay_jump_mini'].includes(item.value)" 
					src="/static/images/public_imgs/wechat-logo-icon.png" 
					style="width: 36rpx; height: 36rpx;" mode=""> </image>
					
				<image
					v-show="['alipay', 'alipay_method', 'adapay_alipay'].includes(item.value)"
					src="/static/images/public_imgs/alipay-logo-icon.png" 
					style="width: 36rpx; height: 36rpx;" mode=""> </image>
					
				<image
					v-show="['lianlianpay'].includes(item.value)"
					src="/static/images/public_imgs/lianlianpay-logo-icon.png" 
					style="width: 36rpx; height: 36rpx;" mode=""> </image>

				<view style="width: 0; height: 0;visibility: hidden;">
					<radio color="#FFDA4D" :value="item.value" :checked="index === currentPayType" />
				</view>

				<view style="margin: 0 18rpx;">{{ item.name || '支付' }}</view>

				<image v-show="index !== currentPayType" src="/static/images/public_imgs/select.png" style="width: 30rpx; height: 30rpx;" mode=""> </image>
				<image v-show="index === currentPayType" src="/static/images/public_imgs/selecting.png" style="width: 30rpx; height: 30rpx;" mode=""> </image>
			</label>
		</radio-group>
	</view>
</template>

<script>
	import store from '@/store';
	import { ACTIONS } from '@/store/modules/commonStore';
	import { setAsyncFunWait } from '@/setupproject/TOOLS_FUN';

	export default {
		name: 'comPayType',
		props: {
			value: {
				type: Boolean | Number,
				default: () => 0
			},
			fromSence: {
				type: String,
				default: () => ''
			},
		},
		data() {
			return {
				currentPayType: 0
			};
		},
		computed: {
			token() {
				return this.$store.getters.token;
			},
			commonPayTypeList() {
				return this.$store.getters.commonPayTypeList || [];
			}
		},
		async created() {
			if (this.token) {
				// 获取支付类型
				store.dispatch(ACTIONS.RECHARGE_TYPE_GET_FUN, {
					pack_name: this.$store.getters.commonConfigs.appPackageName,
					version: this.$store.getters.commonConfigs.appPackageVer,
					platform: uni.getSystemInfoSync().platform,
				});
				
				if(!this.commonPayTypeList.length) return;
				await this.payTypeRadioChange();
			}
		},
		methods: {
			// 选择充值方式事件
			async payTypeRadioChange(event) {
				if (!event) {
					return this.$emit('input', this.commonPayTypeList[this.currentPayType].value);
				}

				for (let index = 0; index < this.commonPayTypeList.length; index++) {
					if (this.commonPayTypeList[index].value === event.detail.value) {
						this.currentPayType = index;
						this.$emit('input', this.commonPayTypeList[this.currentPayType].value);
						break;
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pay-type-packbox {
		font-size: 28rpx;
		margin: 18rpx 32rpx 32rpx;
		color: #FFFFFF;
		
		.popup-name-txt {
			width: 100%;
			font-size: 32rpx;
			margin-bottom: 28rpx;
		}
	}
</style>
